html {
  box-sizing: border-box;
  font-size: 62.5%;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}
*:before, *:after {
  box-sizing: inherit;
}

/* colors */
body {
  width: 100%;
  height: 100vh;
  background-color: #342f3a;
  font-family: sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.wrapper {
  position: relative;
  height: 250px;
  width: 250px;
  border-radius: 50%;
  background: linear-gradient(#665d72, #c48c9f);
  overflow: hidden;
}
.wrapper > * {
  position: absolute;
}
.wrapper .ground {
  background-color: #665d72;
  bottom: 0;
  height: 80px;
  width: 250px;
}
.wrapper .moon {
  width: 12px;
  height: 12px;
  top: 45px;
  right: 75px;
  border-radius: 50%;
  border-bottom: 2px solid #f3f0f8;
  transform: rotate(20deg);
}
.wrapper .highway {
  box-sizing: content-box;
  right: 0;
  left: 0;
  margin: auto;
  width: 5px;
  opacity: 0.8;
  bottom: 0;
  border-bottom: 80px solid #1a181d;
  border-left: 70px solid transparent;
  border-right: 70px solid transparent;
  transform: skew(30deg);
}
.wrapper .highway::after {
  content: "";
  position: absolute;
  opacity: 0.8;
  width: 0;
  right: 0;
  left: 0;
  margin: auto;
  border-bottom: 80px solid #f3f0f8;
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
}
.wrapper .mountain-1 {
  width: 0;
  height: 0;
  left: -40px;
  bottom: 80px;
  border-bottom: 50px solid #595264;
  border-left: 90px solid transparent;
  border-right: 90px solid transparent;
}
.wrapper .mountain-2 {
  width: 0;
  height: 0;
  right: -65px;
  bottom: 80px;
  border-bottom: 60px solid #595264;
  border-left: 150px solid transparent;
  border-right: 100px solid transparent;
}
.wrapper .stars {
  width: 100%;
  height: 100%;
}
.wrapper .stars .star {
  background-color: #f3f0f8;
  width: 1px;
  height: 1px;
  position: absolute;
  animation-name: shining;
  animation-iteration-count: infinite;
}
.wrapper .stars .star.s1 {
  left: 39%;
  top: 5%;
  animation-duration: 17s;
  animation-delay: -17s;
}
.wrapper .stars .star.s2 {
  left: 76%;
  top: 32%;
  animation-duration: 12s;
  animation-delay: -24s;
}
.wrapper .stars .star.s3 {
  left: 4%;
  top: 12%;
  animation-duration: 20s;
  animation-delay: -21s;
}
.wrapper .stars .star.s4 {
  left: 34%;
  top: 25%;
  animation-duration: 23s;
  animation-delay: -12s;
}
.wrapper .stars .star.s5 {
  left: 2%;
  top: 20%;
  animation-duration: 12s;
  animation-delay: -8s;
}
.wrapper .stars .star.s6 {
  left: 88%;
  top: 11%;
  animation-duration: 20s;
  animation-delay: -4s;
}
.wrapper .stars .star.s7 {
  left: 32%;
  top: 3%;
  animation-duration: 21s;
  animation-delay: -12s;
}
.wrapper .stars .star.s8 {
  left: 62%;
  top: 42%;
  animation-duration: 23s;
  animation-delay: -16s;
}
.wrapper .stars .star.s9 {
  left: 18%;
  top: 31%;
  animation-duration: 23s;
  animation-delay: -23s;
}
.wrapper .stars .star.s10 {
  left: 36%;
  top: 30%;
  animation-duration: 16s;
  animation-delay: -5s;
}
.wrapper .stars .star.s11 {
  left: 3%;
  top: 7%;
  animation-duration: 11s;
  animation-delay: -20s;
}
.wrapper .stars .star.s12 {
  left: 67%;
  top: 12%;
  animation-duration: 21s;
  animation-delay: -20s;
}
.wrapper .stars .star.s13 {
  left: 77%;
  top: 27%;
  animation-duration: 11s;
  animation-delay: -3s;
}
.wrapper .stars .star.s14 {
  left: 33%;
  top: 16%;
  animation-duration: 14s;
  animation-delay: -7s;
}
.wrapper .stars .star.s15 {
  left: 4%;
  top: 9%;
  animation-duration: 17s;
  animation-delay: -7s;
}
.wrapper .stars .star.s16 {
  left: 56%;
  top: 17%;
  animation-duration: 17s;
  animation-delay: -25s;
}
.wrapper .stars .star.s17 {
  left: 19%;
  top: 13%;
  animation-duration: 21s;
  animation-delay: -18s;
}
.wrapper .stars .star.s18 {
  left: 12%;
  top: 23%;
  animation-duration: 13s;
  animation-delay: -16s;
}

@keyframes shining {
  0%, 100% {
    opacity: 1;
  }
  20%, 80% {
    opacity: 0.5;
  }
  40% {
    opacity: 0;
  }
  80% {
    opacity: 0.75;
  }
}